/**
 * 上传文件预览的提示
 * @author tongsitong
 */
import styled from "styled-components";
import icon_warning_round from "@/assets/icons/icon-warning-round.png";

interface PreviewHintProps {
  visible: boolean;
  content?: string; // 提示内容
}

export const PreviewHint = (props: PreviewHintProps) => {
  const { visible, content } = props;
  return (
    <HintWrapper>
      {visible && (
        <Hint>
          <WarningIcon src={icon_warning_round} alt="" />
          <Font10 weight={600}>{content || '上传新的持仓记录将会覆盖原有记录！'}</Font10>
        </Hint>
      )}
    </HintWrapper>
  );
};

const HintWrapper = styled.div`
  height: 37px;
  display: flex;
  align-items: center;
`;

const Hint = styled.div`
  background: #fee0c2;
  border-radius: 12px;
  width: 198px;
  height: 21px;
  position: absolute;
  right: 24px;
  display: flex;
  align-items: center;
`;

const WarningIcon = styled.img`
  width: 11px;
  height: 11px;
  position: absolute;
  left: 7px;
`;

export const Font10 = styled.span`
  // font 10
  font-size: 12px;
  /* 利用放大缩小属性 */
  transform: scale(0.83);
  color: ${(props)=>(props.color || "#e64a00")};
  display: inline-block;
  white-space: nowrap;
  position: absolute;
  left: 4px;
  opacity: ${(props)=>(props.opacity || 1)};
  font-weight: ${(props)=>(props.weight || 400)};
`;
